<template>
  <div class="am-tab-panel am-fade am-active am-in ">

    <div class="actor-new">
      <div class="rate">
        <strong>{{commentsCount.percent}}<span>%</span></strong><br> <span>好评度</span>
      </div>
      <dl>
        <dt>买家印象</dt>
        <dd class="p-bfc">
          <q class="comm-tags"><span>味道不错</span><em>(2177)</em></q>
          <q class="comm-tags"><span>颗粒饱满</span><em>(1860)</em></q>
          <q class="comm-tags"><span>口感好</span><em>(1823)</em></q>
          <q class="comm-tags"><span>商品不错</span><em>(1689)</em></q>
          <q class="comm-tags"><span>香脆可口</span><em>(1488)</em></q>
          <q class="comm-tags"><span>个个开口</span><em>(1392)</em></q>
          <q class="comm-tags"><span>价格便宜</span><em>(1119)</em></q>
          <q class="comm-tags"><span>特价买的</span><em>(865)</em></q>
          <q class="comm-tags"><span>皮很薄</span><em>(831)</em></q>
        </dd>
      </dl>
    </div>
    <div class="clear"></div>
    <div class="tb-r-filter-bar">
      <ul class=" tb-taglist am-avg-sm-4">
        <li class="tb-taglist-li tb-taglist-li-current">
          <div class="comment-info">
            <span>全部评价</span>
            <span class="tb-tbcr-num">{{ commentsCount.total }}</span>
          </div>
        </li>

        <li class="tb-taglist-li tb-taglist-li-1">
          <div class="comment-info">
            <span>好评</span>
            <span class="tb-tbcr-num">{{commentsCount.goodTotal}}</span>
          </div>
        </li>

        <li class="tb-taglist-li tb-taglist-li-0">
          <div class="comment-info">
            <span>中评</span>
            <span class="tb-tbcr-num">{{commentsCount.midTotal}}</span>
          </div>
        </li>

        <li class="tb-taglist-li tb-taglist-li--1">
          <div class="comment-info">
            <span>差评</span>
            <span class="tb-tbcr-num">{{commentsCount.badTotal}}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="clear"></div>

    <ul class="am-comments-list am-comments-list-flip">
      <template v-for="comment in productComments">
        <li class="am-comment">
          <!-- 评论容器 -->
          <a href="">
            <img class="am-comment-avatar" :src="comment.userImg"/>
            <!-- 评论者头像 -->
          </a>

          <div class="am-comment-main">
            <!-- 评论内容容器 -->
            <header class="am-comment-hd">
              <!--<h3 class="am-comment-title">评论标题</h3>-->
              <div class="am-comment-meta">
                <!-- 评论元数据 -->
                <a href="#link-to-user" class="am-comment-author">
                  {{ comment.username | userNameFilter }}
                  <span v-if="comment.isAnonymous==1">(匿名)</span>
                  <span v-else>{{comment.nickname}}</span>
                </a>
                <!-- 评论者 -->
                评论于
                <time datetime="">{{ comment.sepcName | dateFormat }}</time>
              </div>
            </header>

            <div class="am-comment-bd">
              <div class="tb-rev-item " data-id="255776406962">
                <div class="J_TbcRate_ReviewContent tb-tbcr-content ">
                  {{ comment.commContent }}
                </div>
                <div class="tb-r-act-bar" v-if="comment.replyStatus==1">
                <!--颜色分类：柠檬黄&nbsp;&nbsp;尺码：S-->
                  <hr>
                  <label style="color: gray;font-weight: bold;">商家回复:</label>
                  <br>
                  {{comment.replyContent}}
                </div>
              </div>

            </div>
            <!-- 评论内容 -->
          </div>
        </li>
      </template>
    </ul>

    <div class="clear"></div>

    <!--分页 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :total="count"
        :page-size="pageSize"
    @next-click="next" @prev-click="prev" @current-change="pager">
    </el-pagination>
    <!--<ul class="am-pagination am-pagination-right">
      <li class="am-disabled"><a href="#">&laquo;</a></li>
      <li class="am-active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
    </ul>-->
    <div class="clear"></div>

    <div class="tb-reviewsft">
      <div class="tb-rate-alert type-attention">购买前请查看该商品的 <a href="#"
                                                              target="_blank">购物保障</a>，明确您的售后保障权益。
      </div>
    </div>

  </div>
</template>

<script>
import {getProductComment,getProductCommentCount} from '@/api/detail.js'
import Moment from 'moment'
export default {
  name: "DetailComments",
  props: ['productId'],
  data() {
    return {
      pageNum: 1,
      pageSize: 3,
      productComments: [],
      count:0,
      pageCount:0,
      goodTotal:0,
      commentsCount:{}


    }
  },
  created() {
    getProductComment(this.productId,this.pageNum,this.pageSize).then(data => {
      const res = data.data;
      //console.log(JSON.stringify(res))
      if (res.success) {
        this.productComments = res.data.list;
        this.count = res.data.count;
        this.pageCount = res.data.pageCount;
        //console.log(12321+JSON.stringify(res.data))
      }
    }).catch(error => {
      this.$message({message: error, type: 'error', showClose: true})
    });
    getProductCommentCount(this.productId).then(data=>{
      const res = data.data;
      if(res.success){
        this.commentsCount = res.data;
        // console.log(JSON.stringify(res.data))
      }
    }).catch(error=>{
      this.$message({message: error, type: 'error', showClose: true})
    })

  },
  filters:{
    userNameFilter(username){
      return username.substr(0,1) + '******'+ username.substr(username.length-1,1)
    },
    dateFormat(date){
      return Moment(date).format('YYYY年MM月DD日 HH:mm:ss')
    }
  },
  methods:{

    prev(){
        if(this.pageNum > 1){
        this.pageNum--;
      }
    },
    pager(event){
      this.pageNum = event;
      getProductComment(this.productId,this.pageNum,this.pageSize).then(data => {
        const res = data.data;
        //console.log(JSON.stringify(res))
        if (res.success) {
          this.productComments = res.data.list;
          this.count = res.data.count;
          this.pageCount = res.data.pageCount;
          // console.log(JSON.stringify(res.data))
        }
      }).catch(error => {
        this.$message(error)
      })
    },
    next(){
      if(this.pageNum < this.pageCount){
        this.pageNum++;
      }
    }
  }

}
</script>

<style scoped>

</style>